<template>
	<view class="my">
		<view class="my-login-box">
			<img class="qipao" src="../../static/images/bg.png" alt="">
			<view class="my-login">
				<view class="my-login-bg">
					<image style="border-radius: 50%;" v-if="vuex_has_login" :src="vuex_user.avatar" mode=""></image>
					<image v-else src="/static/images/tx.png" mode="" @click='isShowLogin()'></image>
				</view>
				<view v-show="vuex_has_login" class="my-login-text">
					{{vuex_user.nickname}}
				</view>
				<view v-show="!vuex_has_login" @click='isShowLogin()' class="my-login-text">
					点击登录
				</view>
			</view>
		</view>
		<view class="my-message">
			<view class="my-message-text">
				<view class="my-message-text-con" @click="orderForm">
					<view class="my-message-text-con-left">
						<image src="/static/images/dd.png" mode=""></image>
						<text>我的订单</text>
					</view>
					<view class="my-message-text-con-right" style="display: flex;align-items: center;">
						<text style="color: #909399;font-size: 28rpx;"
							v-if="vuex_has_login">{{vuex_user.uncomplete_order_count}} 单未开始</text>
						<image src="/static/images/yjt.png" mode=""></image>
					</view>
				</view>
				<view class="my-message-text-con" @click="goTopUp">
					<view class="my-message-text-con-left">
						<image src="/static/images/zd.png" mode=""></image>
						<text>充值</text>
					</view>
					<view class="my-message-text-con-right">
						<image src="/static/images/yjt.png" mode=""></image>
					</view>
				</view>
				<view class="my-message-text-cons" @click="goBalance">
					<view class="my-message-text-con-left">
						<image src="/static/images/ye.png" mode=""></image>
						<text>余额明细</text>
					</view>
					<view class="my-message-text-con-right" style="display: flex;align-items: center;flex-wrap: nowrap;">
						<text style="color: #909399;font-size: 28rpx;" v-if="vuex_has_login">{{vuex_user.balance}}元</text>
						<image src="/static/images/yjt.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="my-message">
			<view class="my-message-texts">
				<view class="my-message-text-con" @click="viewMyInfo">
					<view class="my-message-text-con-left">
						<image src="/static/images/gr.png" mode=""></image>
						<text>个人信息</text>
					</view>
					<view class="my-message-text-con-right">
						<image src="/static/images/yjt.png" mode=""></image>
					</view>
				</view>
				<view class="my-message-text-con">
					<button class="btnc" @opensetting="goPrivacy" open-type="openSetting">
						<view class="my-message-text-con-left">
							<image src="/static/images/ys.png" mode=""></image>
							<text>隐私设置</text>
						</view>
						<view class="my-message-text-con-right">
							<image src="/static/images/yjt.png" mode=""></image>
						</view>
					</button>

				</view>
			</view>
		</view>
		<view class="my-message" v-if="vuex_has_login">
			<view class="my-message-texts">

				<view class="logout">
					<button class="btn" @click="loginOut">退出登录</button>
				</view>
			</view>

		</view>

		<popUp v-if="show" :show="show" @close="close" />
		<m-tabbar value='2'></m-tabbar>
	</view>
</template>

<script>
	import {
		user_login_api,
		login_out_api
	} from '@/common/api.js'
	import popUp from "@/components/popUp/index.vue";
	import mTabbar from '@/components/m-tabbar/index.vue';
	export default {
		components: {
			popUp,
			mTabbar
		},
		data() {
			return {
				show: false,
				fileList1: [],
				// 登录需要的信息
				setUserInfo: {
					code: "",
				},
				// 展示的一些用户信息
				userInfo: {
					nickname: "点击登录",
					avatar: "",
				},
			};
		},
		methods: {

			goPrivacy(e) {
				console.log(e);
				// uni.navigateTo({
				// 	url: `/pages/my/privacy`
				// })
			},

			// 先尝试直接登录
			isShowLogin() {
				uni.login({
					provider: 'weixin',
					success: (res) => {
						user_login_api({
							code: res.code
						}).then((res) => {
							if (res.code == 1) {
								this.vuex_login(res)
							} else {
								this.show = true
							}
						})
					},
					fail: (err) => {
						console.log(err);
					},
				})

			},

			open() {},
			//  关闭弹窗
			close() {
				setTimeout(() => {
					uni.showTabBar()
				}, 500)
				this.show = false

			},
			change(e) {},
			orderForm() {
				if (!this.vuex_has_login) return this.$u.toast('请登录')
				uni.navigateTo({
					url: '/pages/my/myOrder'
				})
			},
			goTopUp() {
				if (!this.vuex_has_login) return this.$u.toast('请登录')
				uni.navigateTo({
					url: '/pages/my/recharge'
				})
			},
			// 校验是否登录
			checkLogin() {
				const token = uni.getStorageSync("token");
				if (token === "") {
					uni.showToast({
						title: "请登录",
						icon: "none"
					})
					return false;
				} else {
					return true
				}
			},
			goBalance() {
				if (!this.vuex_has_login) return this.$u.toast('请登录')
				uni.navigateTo({
					url: '/pages/my/myBalance'
				})
			},
			//  查看我的信息
			viewMyInfo() {
				if (!this.vuex_has_login) return this.$u.toast('请登录')
				uni.navigateTo({
					url: '/pages/my/myInformation'
				})
			},
			loginOut() {
				uni.showLoading({})
				login_out_api().then(res => {
					if (res.code == 1) {
						this.$u.toast(res.msg)
						this.vuex_logout()
					} else {
						this.$u.toast('退出失败,请联系客服')
					}
				}).finally(() => {
					uni.hideLoading({})
				})
			}
		}
	}
</script>

<style lang="scss">
	.my {
		width: 750rpx;

		.my-login-box {
			width: 750rpx;
			height: 564rpx;
			background: linear-gradient(205deg, #40C6A1 0%, rgba(64, 198, 161, 0) 100%), linear-gradient(84deg, #9AE2CE 0%, rgba(154, 226, 206, 0) 100%);
			position: relative;

			.qipao {
				position: absolute;
				left: 0rpx;
				bottom: 0rpx;
				z-index: 1;
				width: 100%;
				height: 540rpx;
			}

			.my-login {
				width: 750rpx;
				height: 564rpx;
				// background-image: url("/static/images/bg.png");
				background-size: cover;
				background-repeat: no-repeat;
				overflow: hidden;
				position: relative;
				z-index: 2;

				.my-login-bg {
					margin: 176rpx auto 0;
					width: 212rpx;
					height: 212rpx;
					background: #FFFFFF;
					border-radius: 50%;

					display: flex;
					align-items: center;
					justify-content: center;

					image {
						vertical-align: middle;
						width: 190rpx;
						height: 190rpx;
						// margin-top: 10rpx;
					}
				}

				.my-login-text {
					margin-top: 24rpx;
					text-align: center;
					font-size: 36rpx;
					font-weight: 500;
					color: #303133;
				}
			}
		}

		.my-message {
			width: 750rpx;
			background: #fff;
			margin-top: -30rpx;
			border-radius: 35rpx 35rpx 24rpx 24rpx;
			overflow: hidden;
			margin-bottom: 24rpx;
			position: relative;
			z-index: 2;

			.my-message-text {
				width: 704rpx;
				background: #F3F4F6;
				margin: 24rpx auto 0;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				box-sizing: border-box;
				padding: 0 24rpx;
				overflow: hidden;

				.my-message-text-con {
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					align-items: center;
					margin-top: 24rpx;
					padding-bottom: 22rpx;
					border-bottom: 2rpx solid #C0C4CC;

					.my-message-text-con-left {
						display: flex;
						align-items: center;

						image {
							width: 46rpx;
							height: 46rpx;
							margin-right: 16rpx;
						}

						text {
							font-size: 28rpx;
							font-weight: 400;
							color: #606266;
						}
					}

					.my-message-text-con-right {
						image {
							width: 48rpx;
							height: 48rpx;
						}
					}


				}

				.my-message-text-cons {
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					align-items: center;
					margin-top: 24rpx;
					padding-bottom: 22rpx;


					.my-message-text-con-left {
						display: flex;
						align-items: center;

						image {
							width: 46rpx;
							height: 46rpx;
							margin-right: 16rpx;
						}

						text {
							font-size: 28rpx;
							font-weight: 400;
							color: #606266;
						}
					}

					.my-message-text-con-right {
						image {
							width: 48rpx;
							height: 48rpx;
						}
					}


				}
			}
		}

		.my-message {
			width: 750rpx;
			background: #fff;
			margin-top: -30rpx;
			border-radius: 35rpx 35rpx 24rpx 24rpx;
			overflow: hidden;
			margin-bottom: 24rpx;

			.login-out-btn {
				width: 100%;
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
				background: #F3F4F6;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				width: 704rpx;
				margin: 24rpx auto 0;
				color: #606266;
				font-weight: bold;
				font-size: 36rpx;
			}

			.my-message-texts {
				width: 704rpx;
				background: #F3F4F6;
				margin: 24rpx auto 0;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				box-sizing: border-box;
				padding: 0 24rpx;
				overflow: hidden;


				.my-message-text-con {
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					align-items: center;
					margin-top: 24rpx;
					padding-bottom: 22rpx;
					border-bottom: 2rpx solid #C0C4CC;

					.my-message-text-con-left {
						display: flex;
						align-items: center;

						image {
							width: 46rpx;
							height: 46rpx;
							margin-right: 16rpx;
						}

						text {
							font-size: 28rpx;
							font-weight: 400;
							color: #606266;
						}
					}

					.my-message-text-con-right {
						image {
							width: 48rpx;
							height: 48rpx;
						}
					}


				}

				.my-message-text-con:last-child {
					border-bottom: none;
				}

				.my-message-text-cons {
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					align-items: center;
					margin-top: 24rpx;
					padding-bottom: 22rpx;


					.my-message-text-con-left {
						display: flex;
						align-items: center;

						image {
							width: 46rpx;
							height: 46rpx;
							margin-right: 16rpx;
						}

						text {
							font-size: 28rpx;
							font-weight: 400;
							color: #606266;
						}
					}

					.my-message-text-con-right {
						image {
							width: 48rpx;
							height: 48rpx;
						}
					}


				}
			}
		}
	}

	.login-pop-up {
		width: 750rpx;

		.login-pop-up-close {
			image {
				width: 48rpx;
				height: 48rpx;
				margin: 24rpx 0 0 24rpx;
			}
		}

		.login-pop-up-tit {
			width: 750rpx;
			margin-top: 36rpx;

			.login-pop-up-tit-one {
				font-size: 36rpx;
				height: 56rpx;
				font-weight: 500;
				color: #303133;
			}

			.login-pop-up-tit-two {
				height: 50rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #606266;
			}

			.login-pop-up-tit-three {
				width: 192rpx;
				height: 192rpx;
				border-radius: 50%;
				margin: 0 auto;
				border: 4rpx solid #303133;
				box-sizing: border-box;

				.choose-avatar {
					width: 100%;
					height: 100%;
					background-color: rgb(224, 250, 242);
					outline: none;
					border: none;
					line-height: 192rpx;
					border-radius: 50%;
					color: #C0C4CC;
				}

				.u-upload {
					// border-radius: 50%;
				}

				.avatar {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.login-pop-up-tit-three {
				// margin: 62rpx 0 64rpx 280rpx;
			}

			.login-pop-up-tit-four {
				width: 460rpx;
				background: #E0FAF2;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
				border: 4rpx solid #303133;
				margin: 64rpx auto 0rpx auto;

				.u-input {
					font-size: 36rpx;
					height: 44rpx;
					font-weight: 500;
					color: #C0C4CC;
				}
			}

			.login-pop-up-tit-five {
				margin-top: 80rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #303133;
			}

			.login-pop-up-tit-six {

				border-radius: 8rpx 8rpx 8rpx 8rpx;
				margin: 16rpx auto 30rpx;

				button {
					width: 654rpx;
					height: 96rpx;
					background: #40C6A1;
					font-size: 36rpx;
					font-weight: 500;
					color: #F3F4F6;
				}
			}


		}

	}

	.logout {
		// width: 144rpx;

		// height: 88rpx;
		// background: #F3F4F6;
		// border-radius: 16rpx 16rpx 16rpx 16rpx;

		.btn {
			font-size: 36rpx;
			color: #606266;
			background-color: #F3F4F6;

			&::after {
				content: '';
				border: none;
			}
		}
	}

	.btnc {
		background: none;
		display: flex;
		align-items: center;
		justify-content: space-between;
		line-height: inherit;
		width: 100%;
		padding: 0rpx;
	}

	button.btnc::after {
		border: none;
	}
</style>
